/*
 show  //正常状态的框
 bigshow   // 放大的框的盒子
 smallshow  //缩小版的框
 mask   //放大的区域（黑色遮罩）
 bigitem  //放大的框
 */
function mag(show, bigshow,smallshow,mask,bigitem) {
  this.show = show;
  this.bigshow = bigshow;
  this.smallshow = smallshow;
  this.mask = mask;
  this.bigitem = bigitem;
  this.obj = {
    middle: '.middle',
    middleBox: '.middle_box'
  }
}
mag.prototype = {
    init: function () {
      var that = this;
      that.start();
      this.showHover();
      this.smallImgHover();
      this.showMove();
    },
    start: function () {
      var that = this;
      var buil=$(that.show).width()/$(that.mask).width()*$(that.bigshow).width();
      $(that.bigitem).css("width",buil);

      $(that.smallshow + ' img').eq(0).css("border","2px solid #f40");

      var midhei=$(that.obj.middle + ' li').innerWidth()*$(that.obj.middle + ' li').length;
      $(that.obj.middle).width(midhei);
    },
    showHover: function () {
      var that = this;
      $(that.show).hover(function(){
          $(that.bigshow).show();
          $(that.mask).show();
      },function(){
          $(that.bigshow).hide();
          $(that.mask).hide();
      });
    },
    smallImgHover: function () {
      var that = this;
      $(that.smallshow + ' img').click(function(){
          var src=$(this).attr("src");
          $(that.smallshow + ' img').css("border","1px solid #e8e8e8");
          $(this).css("border","2px solid #f40");
          $(that.show + '>img').attr("src",src);
          $(that.bigitem+ '>img').attr("src",src);
      });
    },
    showMove:function(){
      var that = this;
      $(that.show).mousemove(function(e){
          var bigx=$(this).offset().left;
          var bigy=$(this).offset().top;
          var x= e.clientX;
          var y= e.clientY;
          var scrollx=window.scrollX;
          var scrolly=window.scrollY;
          var ox=x+scrollx-bigx-$(that.mask).width()/2;
          var oy=y+scrolly-bigy-$(that.mask).height()/2;
          if(ox<=0){
              ox=0
          }
          if(ox>$(that.show).width()-$(that.mask).width()){
              ox=$(that.show).width()-$(that.mask).width();
          }
          if(oy<=0){
              oy=0
          }
          if(oy>$(that.show).height()-$(that.mask).height()){
              oy=$(that.show).height()-$(that.mask).height();
          }
          $(that.mask).css({marginLeft: ox});
          $(that.mask).css({marginTop: oy});
          var bei=$(that.show).width()/$(that.mask).width();
          $(that.bigitem+ '>img').css(
          {
            marginLeft:-bei*ox,
            marginTop:-bei*oy
          })
      });
    }
}
